<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">

    <link rel="stylesheet" href="../jiandanshiyong/jquery.page.css">
    <script type="text/javascript" src="../jiandanshiyong/jquery.page.js"></script>
</head>
<body style="background-color: white;color: black ;">
<button type="button" class="btn btn-info" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    添加报修申请
</button>
<div style="position:absolute;right:200px;margin-top:-33.5px">
    状态：
    <select style="width:90px;height:33.43px ;border-radius:8px ;background-color: #5bc0de;color: white" id="sel">
        <option value="D">全部</option>
        <option value="B">未处理</option>
        <option value="A">处理中</option>
        <option value="C">已完成</option>
    </select>
    <button class="btn btn-info" style="margin-top:-3.5px" id="cx">查询</button>
</div>
<div style="height:420px">
    <table id="tab" class="table table-striped" style="width: 100%;table-layout : fixed;font-family: SimSun;">
        <tr>
            <td>序号</td>
            <td>用户姓名</td>
            <td>图片地址</td>
            <td>联系电话</td>
            <td>报修类容</td>
            <td>申请时间</td>
            <td>处理状态</td>
            <td>操作</td>
        </tr>

    </table>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--      <form action="/upload" enctype="multipart/form-data" method="post">-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    <center>
                        添加报修申请
                    </center>
                </h4>
            </div>

            <div class="modal-body">
                <div>报修类容</div>
                <textarea style="width:350px;height: 150px;resize:none" id="bxlr"></textarea>

                <br><br>联系电话
                <input class="form-control" id="lxdh" placeholder="联系电话">

                <br><br>上传图片
                <input class="form-control" type="file" name="file" id="tp" placeholder="联系电话">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>

                <input type="button" value="提交报修" id="bxbut" class="btn btn-warning">
            </div>
            <!--      </form>-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--  评分模态框（Modal） -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel3">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">
                <div id="rate"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="getRate">评价</button>
                <!--        <button type="button" class="btn btn-primary">提交更改</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div id="page"></div>
<script>
    /**
     * 刷新界面
     */
    function  ff(){
        window.location.href="repairs.html";
    }

    /**
     *添加表修申请
     */
    $("#bxbut").on("click", function () {

        let bxlr = $("#bxlr").val() //报修类容
        let lxdh = $("#lxdh").val() //联系电话
        console.log(bxlr, lxdh)


        //获取图片
        var formData = new FormData();
        formData.append("tp", $("#tp")[0].files[0]);
        formData.append("bxlr", bxlr);
        formData.append("lxdh", lxdh);

        $.ajax({
            url: "upload",
            type: "post",
            contentType: false,
            processData: false,
            data: formData,
            success: function (data) {

                if (data) {
                    layer.msg('添加成功', {icon: 6});
                    setTimeout("ff()","1100");


                } else {
                    layer.msg('添加失败', {icon: 2});
                    setTimeout("ff()","1100");

                }

            }


        })


    })


    function pf(bh) {
        //手动开启模态框
        $('#myModal3').modal('show');

        //存储评价订单的id
        $.ajax({
            url: "pfid",
            type: "post",
            data: {"bh": bh}
        })
    }


    $.ajax({
        url: "sqbx",
        type: "post",
        success: function (data) {
            console.log(data)

            // 数据条数
            let ts = data.length;
            // 设置分页数
            let ys = 1
            while (true) {
                ts = ts - 5;

                if ( ts == 0) {
                    break;
                }
                if ( ts == 5) {
                    ys++
                    break;
                }
                if (ts < 5 && ts > 0) {
                    ys++
                    break;
                }
                if (ts < 0) {
                    break;
                }
                ys++
            }


            $("#page").Page({
                totalPages: ys,//分页总数
                liNums: 3,//分页的数字按钮数(建议取奇数)
                activeClass: 'activP', //active 类样式定义
                callBack: function (page) {
                    // console.log(page)
                    fy(page)
                }
            });
            for (let i = 0; i < 5; i++) {
                // $.each(data,function (index,item){
                //创建一个tr，8个td

                let item = data[i]
                let newtr = $("<tr>")

                let td1 = $("<td>")
                td1.html(item.ddxh)

                let td2 = $("<td>")
                td2.html(item.zhxm)

                let td3 = $("<td>")
                let im = $("<img>")
                im.attr("src", "/img/" + item.tbxq)
                im.attr("width", "60px")
                im.attr("height", "40px")
                td3.append(im)

                let td4 = $("<td>")
                td4.html(item.lxdh)

                let td5 = $("<td>")
                td5.html(item.bxlr)

                let td6 = $("<td>")
                td6.html(item.sqrq)

                let td7 = $("<td>")

                let td8 = $("<td>")

                if (item.clzt == "A") {
                    td7.html("处理中")

                    let but = $("<button>")

                    but.attr("disabled", "disabled")

                    let s1 = $("<span>");

                    s1.attr("class", "glyphicon glyphicon-remove")
                    but.attr("class", "btn btn-warning")

                    but.html(s1)
                    td8.html(but)
                } else if (item.clzt == "B") {
                    td7.html("未处理")

                    let but = $("<button>")

                    but.attr("disabled", "disabled")

                    let s1 = $("<span>");

                    s1.attr("class", "glyphicon glyphicon-remove")
                    but.attr("class", "btn btn-warning")

                    but.html(s1)
                    td8.html(but)

                } else if (item.clzt == "C") {
                    td7.html("已处理")
                    if (item.pf == 0) {
                        let but = $("<button>")

                        let bh = item.ddxh
                        but.attr("class", "btn btn-warning")
                        but.attr("data-toggle", "modal")
                        but.attr("onclick", 'pf(' + bh + ')')

                        but.html("未评价")
                        td8.html(but)
                    } else {
                        let d = $("<div>")
                        d.attr("id", item.ddxh)
                        setTimeout(function () {
                            layui.use(['layer', 'jquery', 'rate'], function () {
                                var $ = layui.jquery;
                                var rate = layui.rate;
                                rate.render({
                                    elem: "#" + item.ddxh
                                    , value: item.pf
                                    , readonly: true
                                });
                            });
                        }, 1)
                        $(td8).append(d)
                    }


                }


                newtr.append(td1, td2, td3, td4, td5, td6, td7, td8)

                $("#tab").append(newtr)
            }
        }

    })

    //分页方法
    function fy(page) {
        $.ajax({
            url: "baoxiufy",
            type: "post",
            data: {
                "page": page
            },
            success: function (data) {
                $("#tab  tr:not(:first)").html("");
                console.log(data)
                for (let i = 0; i < data.length; i++) {
                    // $.each(data,function (index,item){
                    //创建一个tr，8个td

                    let item = data[i]
                    let newtr = $("<tr>")

                    let td1 = $("<td>")
                    td1.html(item.ddxh)

                    let td2 = $("<td>")
                    td2.html(item.zhxm)

                    let td3 = $("<td>")
                    let im = $("<img>")
                    im.attr("src", "/img/" + item.tbxq)
                    im.attr("width", "60px")
                    im.attr("height", "40px")
                    td3.append(im)

                    let td4 = $("<td>")
                    td4.html(item.lxdh)

                    let td5 = $("<td>")
                    td5.html(item.bxlr)

                    let td6 = $("<td>")
                    td6.html(item.sqrq)


                    let td7 = $("<td>")

                    let td8 = $("<td>")

                    if (item.clzt == "A") {
                        td7.html("处理中")

                        let but = $("<button>")

                        but.attr("disabled", "disabled")

                        let s1 = $("<span>");

                        s1.attr("class", "glyphicon glyphicon-remove")
                        but.attr("class", "btn btn-warning")

                        but.html(s1)
                        td8.html(but)
                    } else if (item.clzt == "B") {
                        td7.html("未处理")

                        let but = $("<button>")

                        but.attr("disabled", "disabled")

                        let s1 = $("<span>");

                        s1.attr("class", "glyphicon glyphicon-remove")
                        but.attr("class", "btn btn-warning")

                        but.html(s1)
                        td8.html(but)

                    } else if (item.clzt == "C") {
                        td7.html("已处理")
                        if (item.pf == 0) {
                            let but = $("<button>")

                            but.attr("class", "btn btn-warning")
                            let bh = item.ddxh
                            but.attr("onclick", 'pf(' + bh + ')')

                            but.html("未评价")
                            td8.html(but)
                        } else {
                            let d = $("<div>")
                            d.attr("id", item.ddxh)
                            setTimeout(function () {
                                layui.use(['layer', 'jquery', 'rate'], function () {
                                    var $ = layui.jquery;
                                    var rate = layui.rate;
                                    rate.render({
                                        elem: "#" + item.ddxh
                                        , value: item.pf
                                        , readonly: true
                                    });
                                });
                            }, 1)
                            $(td8).append(d)
                        }


                    }


                    newtr.append(td1, td2, td3, td4, td5, td6, td7, td8)

                    $("#tab").append(newtr)
                }
            }
        })
    }

    layui.use(['layer', 'jquery', 'rate'], function () {
        var $ = layui.jquery;
        var rate = layui.rate;
        // 渲染评分组件
        var instance = rate.render({
            elem: '#rate',
            length: 5,
            theme: '#ffd561',
            choose: function (value) {
                // 此处点击分数之后可用Ajax传递到后台并保存到数据库 具体略
                // 评分完成之后重载实例
                rate.render({
                    elem: '#rate',
                    length: 5,
                    theme: '#ffd561',
                    // value值也可以是前台通过Ajax获取到的数据库中的值
                    value: value,
                    // 设置为只读防止多次评分
                    readonly: true
                })
            }
        });


        // 点击按钮获取分数
        $("#getRate").click(function () {
            // console.log(instance);
            // 打印出instance可知instance.config.value即是评分值
            let fs = instance.config.value
            // layer.msg("获取分数：" +fs);
            //修改评分
            $.ajax({
                url: "xiugaipingfen",
                type: "post",
                data: {"fs": fs},
                success: function (data) {
                    if (data) {
                        layer.msg('评分成功', {icon: 6});
                        setTimeout("ff()","1100");
                    } else {
                        layer.msg('评分失败', {icon: 2});
                        setTimeout("ff()","1100");
                    }
                }
            })

        });

    });
    /**
     *  查询
     */
    $("#cx").on("click", function () {
        let v = $("#sel").val()
        if (v == "D") {
            window.location.href = "repairs.html"
        } else {
            $.ajax({
                url: "bxcx",
                type: "post",
                data: {"zt": v},
                success: function (data) {

                    console.log(data)
                    $("#tab  tr:not(:first)").html("");

                    // 数据条数
                    let ts = data.length;
                    // 设置分页数
                    let ys = 1
                    while (true) {
                        ts = ts - 5;

                        if ( ts == 0) {
                            break;
                        }
                        if ( ts == 5) {
                            ys++
                            break;
                        }
                        if (ts < 5 && ts > 0) {
                            ys++
                            break;
                        }
                        if (ts < 0) {
                            break;
                        }
                        ys++
                    }


                    $("#page").Page({
                        totalPages: ys,//分页总数
                        liNums: 3,//分页的数字按钮数(建议取奇数)
                        activeClass: 'activP', //active 类样式定义
                        callBack: function (page) {
                            // console.log(page)
                            // console.log("<<<<<<<")
                            let zt = data[0].clzt;
                            // console.log(data[0].clzt)
                            $.ajax({
                                url: "fycxbxzt",
                                type: "post",
                                data: {"page": page, "zt": zt},
                                success: function (data) {
                                    fyztbx(data)
                                }
                            })

                        }
                    });
                    for (let i = 0; i < 5; i++) {
                        // $.each(data,function (index,item){
                        //创建一个tr，8个td

                        let item = data[i]
                        let newtr = $("<tr>")

                        let td1 = $("<td>")
                        td1.html(item.ddxh)

                        let td2 = $("<td>")
                        td2.html(item.zhxm)

                        let td3 = $("<td>")
                        let im = $("<img>")
                        im.attr("src", "/img/" + item.tbxq)
                        im.attr("width", "60px")
                        im.attr("height", "40px")
                        td3.append(im)

                        let td4 = $("<td>")
                        td4.html(item.lxdh)

                        let td5 = $("<td>")
                        td5.html(item.bxlr)

                        let td6 = $("<td>")
                        td6.html(item.sqrq)

                        let td7 = $("<td>")

                        let td8 = $("<td>")

                        if (item.clzt == "A") {
                            td7.html("处理中")

                            let but = $("<button>")

                            but.attr("disabled", "disabled")

                            let s1 = $("<span>");

                            s1.attr("class", "glyphicon glyphicon-remove")
                            but.attr("class", "btn btn-warning")

                            but.html(s1)
                            td8.html(but)
                        } else if (item.clzt == "B") {
                            td7.html("未处理")

                            let but = $("<button>")

                            but.attr("disabled", "disabled")

                            let s1 = $("<span>");

                            s1.attr("class", "glyphicon glyphicon-remove")
                            but.attr("class", "btn btn-warning")

                            but.html(s1)
                            td8.html(but)

                        } else if (item.clzt == "C") {
                            td7.html("已处理")
                            if (item.pf == 0) {
                                let but = $("<button>")

                                let bh = item.ddxh
                                but.attr("class", "btn btn-warning")
                                but.attr("onclick", 'pf(' + bh + ')')

                                but.html("未评价")
                                td8.html(but)
                            } else {
                                let d = $("<div>")
                                d.attr("id", item.ddxh)
                                setTimeout(function () {
                                    layui.use(['layer', 'jquery', 'rate'], function () {
                                        var $ = layui.jquery;
                                        var rate = layui.rate;
                                        rate.render({
                                            elem: "#" + item.ddxh
                                            , value: item.pf
                                            , readonly: true
                                        });
                                    });
                                }, 1)
                                $(td8).append(d)
                            }
                        }
                        newtr.append(td1, td2, td3, td4, td5, td6, td7, td8)

                        $("#tab").append(newtr)
                    }
                }
            })
        }
    })


    /**
     *
     * @param data
     *  //分页查询指定状态的报修方法
     */

    function fyztbx(data) {
        $("#tab  tr:not(:first)").html("");

        for (let i = 0; i < data.length; i++) {
            // $.each(data,function (index,item){
            //创建一个tr，8个td

            let item = data[i]
            let newtr = $("<tr>")

            let td1 = $("<td>")
            td1.html(item.ddxh)

            let td2 = $("<td>")
            td2.html(item.zhxm)

            let td3 = $("<td>")
            let im = $("<img>")
            im.attr("src", "/img/" + item.tbxq)
            im.attr("width", "60px")
            im.attr("height", "40px")
            td3.append(im)

            let td4 = $("<td>")
            td4.html(item.lxdh)

            let td5 = $("<td>")
            td5.html(item.bxlr)

            let td6 = $("<td>")
            td6.html(item.sqrq)


            let td7 = $("<td>")

            let td8 = $("<td>")

            if (item.clzt == "A") {
                td7.html("处理中")

                let but = $("<button>")

                but.attr("disabled", "disabled")

                let s1 = $("<span>");

                s1.attr("class", "glyphicon glyphicon-remove")
                but.attr("class", "btn btn-warning")

                but.html(s1)
                td8.html(but)
            } else if (item.clzt == "B") {
                td7.html("未处理")

                let but = $("<button>")

                but.attr("disabled", "disabled")

                let s1 = $("<span>");

                s1.attr("class", "glyphicon glyphicon-remove")
                but.attr("class", "btn btn-warning")

                but.html(s1)
                td8.html(but)

            } else if (item.clzt == "C") {
                td7.html("已处理")
                if (item.pf == 0) {
                    let but = $("<button>")

                    but.attr("class", "btn btn-warning")
                    let bh = item.ddxh
                    but.attr("onclick", 'pf(' + bh + ')')

                    but.html("未评价")
                    td8.html(but)
                } else {
                    let d = $("<div>")
                    d.attr("id", item.ddxh)
                    setTimeout(function () {
                        layui.use(['layer', 'jquery', 'rate'], function () {
                            var $ = layui.jquery;
                            var rate = layui.rate;
                            rate.render({
                                elem: "#" + item.ddxh
                                , value: item.pf
                                , readonly: true
                            });
                        });
                    }, 1)
                    $(td8).append(d)
                }


            }


            newtr.append(td1, td2, td3, td4, td5, td6, td7, td8)

            $("#tab").append(newtr)
        }
    }
</script>

</body>
</html>